<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	template="/templates/menu-template.xhtml">

	<ui:define name="title">
		<h:outputText value="#{msg.catalogoControl}" />
	</ui:define>
	<ui:define name="content">
		<a4j:form id="form">
			<rich:panel>
				<a4j:keepAlive beanName="beanControl" />
				<f:facet name="header">
					<h:outputText value="#{msg.escogerAccion}" />
				</f:facet>
				<h:panelGrid columns="1">
					<a4j:commandButton ajaxSingle="true" value="#{msg.agregarMarca}"
						id="addControl">
						<rich:componentControl for="mpAgregarControl"
							attachTo="addControl" operation="show" event="onclick" />
					</a4j:commandButton>
				</h:panelGrid>
				<rich:spacer height="20px" />
				<rich:extendedDataTable value="#{beanControl.listItems}" var="item"
					id="table" rows="10" reRender="datascroller"
					style="margin-left: auto; margin-right: auto; text-align: center;"
					width="100%">
					<rich:column id="brandControlColumn" label="#{msg.brand}"
						width="20%">
						<f:facet name="header">
							<h:outputText value="#{msg.brand}" />
						</f:facet>
						<h:outputText value="#{item.brand}" />
					</rich:column>
					<rich:column id="modelControlColumn" label="#{msg.model}"
						width="20%">
						<f:facet name="header">
							<h:outputText value="#{msg.model}" />
						</f:facet>
						<h:outputText value="#{item.model}" />
					</rich:column>
					<rich:column id="platformControlColumn" label="#{msg.platform}"
						width="20%">
						<f:facet name="header">
							<h:outputText value="#{msg.platform}" />
						</f:facet>
						<h:outputText value="#{item.platform}" />
					</rich:column>
					<rich:column id="activeControlColumn" label="#{msg.active}"
						width="20%">
						<f:facet name="header">
							<h:outputText value="#{msg.active}" />
						</f:facet>
						<h:outputText value="#{item.isActive}" />
					</rich:column>
					<rich:column width="25%" id="acciones" label="#{msg.acciones}">
						<f:facet name="header">
							<h:outputText value="#{msg.acciones}" />
						</f:facet>
						<a4j:commandLink ajaxSingle="true" id="editControl">
							<h:graphicImage value="/static/images/edit.png" style="border: 0" />
							<f:setPropertyActionListener value="#{item}"
								target="#{beanControl.currentItem}" />
							<rich:componentControl for="mpEditarControl"
								attachTo="editControl" operation="show" event="onclick" />
						</a4j:commandLink>
						<rich:toolTip for="editControl" value="#{msg.editar}" />
						<a4j:commandLink ajaxSingle="true" id="deleteControl">
							<h:graphicImage value="/static/images/delete.png"
								style="border: 0" />
							<f:setPropertyActionListener value="#{item}"
								target="#{beanControl.currentItem}" />
							<rich:componentControl for="mpBorrarControl"
								attachTo="deleteControl" operation="show" event="onclick" />
						</a4j:commandLink>
						<rich:toolTip for="deleteControl" value="#{msg.borrar}" />
					</rich:column>
					<f:facet name="footer">
						<rich:datascroller id="datascroller" renderIfSinglePage="false" />
					</f:facet>
				</rich:extendedDataTable>

				<!-- Inicio Modal Panel Editar -->
				<rich:modalPanel id="mpEditarControl" autosized="true" width="350">
					<a4j:keepAlive beanName="beanControl" />
					<f:facet name="header">
						<h:panelGroup>
							<h:outputText value="#{msg.editar}" />
						</h:panelGroup>
					</f:facet>
					<f:facet name="controls">
						<h:panelGroup>
							<h:graphicImage value="/static/images/close.png"
								id="hideControlPanel" />
							<rich:componentControl for="mpEditarControl"
								attachTo="hideControlPanel" operation="hide" event="onclick" />
						</h:panelGroup>
					</f:facet>
					<rich:graphValidator value="#{beanControl}">
						<h:panelGrid columns="3"
							style="margin-left: auto; margin-right: auto;">
							<h:outputText value="#{msg.brand}" id="brandOutput" />
							<h:outputText value="#{beanControl.brand}" id="brandInput" />
							<h:outputText value="" />
							<h:outputText value="#{msg.model}" id="modelOutput" />
							<h:outputText value="#{beanControl.model}" id="modelInput" />
							<h:outputText value="" />
							<h:outputText value="#{msg.platform}" id="platformOutput" />
							<h:inputText value="#{beanControl.platform}" id="platformInput" />
							<rich:message for="platformInput" />
							<h:outputText value="#{msg.active}" id="activeOutput" />
							<h:inputText value="#{beanControl.isActive}" id="activeInput" />
							<rich:message for="activeInput" />
						</h:panelGrid>
					</rich:graphValidator>
					<h:panelGrid columns="2" style="margin-left: auto;">
						<a4j:commandButton value="#{msg.aceptar}" ajaxSingle="true"
							id="continueEditReader" action="#{beanControl.updateControl}"
							oncomplete="if (#{facesContext.maximumSeverity==null}) #{rich:component('mpAgregarControl')}.hide();" />
					</h:panelGrid>
				</rich:modalPanel>
				<!-- Fin Modal Panel Editar -->
				<!-- Inicio Modal Panel Borrar -->
				<rich:modalPanel id="mpBorrarControl" height="110" width="250">
					<f:facet name="header">
						<h:panelGroup>
							<h:outputText value="#{msg.borrar}"></h:outputText>
						</h:panelGroup>
					</f:facet>
					<p>El registro seleccionado será eliminado permanentemente del
						sistema.</p>
					<a4j:outputPanel ajaxRendered="true">
						<h:panelGrid columns="2" style="margin-left: auto;">
							<h:panelGroup>
								<a4j:commandButton id="continueDeleteControl"
									value="#{msg.continuar}" ajaxSingle="true"
									action="#{beanControl.deleteControl}"
									oncomplete="#{rich:component('mpBorrarControl')}.hide();"
									reRender="table" />
							</h:panelGroup>
							<h:panelGroup>
								<a4j:commandButton id="btnCancelControl" value="#{msg.cancelar}"
									ajaxSingle="true"
									onclick="#{rich:component('mpBorrarControl')}.hide();return false;" />
							</h:panelGroup>
						</h:panelGrid>
					</a4j:outputPanel>
				</rich:modalPanel>
				<!-- Fin Modal Panel Borrar -->
			</rich:panel>
		</a4j:form>

		<!-- Inicio Modal Panel Agregar -->
		<rich:modalPanel id="mpAgregarControl" autosized="true" width="350">
			<a4j:keepAlive beanName="beanControl" />
			<f:facet name="header">
				<h:panelGroup>
					<h:outputText value="#{msg.agregar}" />
				</h:panelGroup>
			</f:facet>
			<f:facet name="controls">
				<h:panelGroup>
					<h:graphicImage value="/static/images/close.png"
						id="hideNewReaderPanel" />
					<rich:componentControl for="mpAgregarControl"
						attachTo="hideNewReaderPanel" operation="hide" event="onclick" />
				</h:panelGroup>
			</f:facet>
			<a4j:form>
				<rich:graphValidator value="#{beanControl}">
					<h:panelGrid columns="3"
						style="margin-left: auto; margin-right: auto;">
						<h:outputText value="#{msg.brand}" id="newBrandOutput" />
						<h:inputText value="#{beanControl.newBrand}" id="newBrandInput" />
						<rich:message for="newBrandInput" />
						<h:outputText value="#{msg.model}" id="newModelOutput" />
						<h:inputText value="#{beanControl.newModel}" id="newModelInput" />
						<rich:message for="newModelInput" />
						<h:outputText value="#{msg.platform}" id="newPlatformOutput" />
						<h:inputText value="#{beanControl.newPlatform}"
							id="newPlatformInput" />
						<rich:message for="newPlatformInput" />
					</h:panelGrid>
				</rich:graphValidator>
				<a4j:commandButton value="#{msg.continuar}" id="acceptNewControl"
					action="#{beanControl.createControl}" ajaxSingle="true"
					oncomplete="if (#{facesContext.maximumSeverity==null}) #{rich:component('mpAgregarControl')}.hide();" />
			</a4j:form>
		</rich:modalPanel>
		<!-- Final Modal Panel Agregar -->
	</ui:define>
</ui:composition>